<template>
	<view>
	
	<z-paging ref="paging" use-virtual-list cell-height-mode="fixed" @query="queryList">
		<template #top>
			<!-- 搜索栏容器 -->
			<view class="search-wrapper">
				<view class="search-container" :class="{'search-focus': isSearchFocus}">
					<uni-icons type="search" size="20" color="#999" class="search-icon" />
					<input class="search-input" v-model="keyword" placeholder="请输入关键词" placeholder-class="placeholder-style" @focus="isSearchFocus = true" @blur="isSearchFocus = false"
						@confirm="handleSearch" />
					<view v-if="keyword" class="clear-btn" @click="clearSearch">
						<uni-icons type="clear" size="18" color="#999" />
					</view>
				</view>
			</view>
			
			<uni-notice-bar scrollable show-icon text="3000+游戏在线表格查看,点击复制链接" @click="copyText('https://vika.cn/share/shrxpiFW28vmnPs13zKNb/dsttHW4WQXPkCHJd5q?token=heKZK7dMQKJe')"/>
		</template>


		<!-- 列表项模板 -->
		<template #cell="{item}">
			<view class="list-item" @click="itemClick(item)">
				<!-- 图片容器 -->
				<view class="image-wrapper">
					<image class="item-image" mode="aspectFill" :src="getImgUrl(item.avatar)" :lazy-load="true" />
				</view>

				<!-- 内容区域 -->
				<view class="content-wrapper">
					<view class="title-row">
						<text class="item-title">{{item.title}}</text>
						<!-- <text class="item-time">{{item.createTime}}</text> -->
					</view>
					<text class="item-brief">{{item.brief}}</text>
				</view>

				<!-- 右侧箭头 -->
				<uni-icons type="right" size="16" color="#ccc" class="arrow-icon" />
			</view>
		</template>
		
		
	</z-paging>
	
	
	<!-- 弹窗组件 -->
	<uni-popup ref="popup" type="center" :mask-click="false">
	  <view class="popup-content">
	    <view class="title">分享信息</view>
	    <view class="item">
	      <text class="label">名称：</text>
	      <text>{{ shareData.title }}</text>
	    </view>
	    
	    <view class="item" @click="copyText(shareData.shareUrl)">
	      <text class="label">分享链接：</text>
	      <text class="copyable">{{ shareData.shareUrl }}</text>
	      <text class="copy-tip">点击复制</text>
	    </view>
	    
	    <view class="item" @click="copyText(shareData.shareCode)">
	      <text class="label">分享码：</text>
	      <text class="copyable">{{ shareData.shareCode }}</text>
	      <text class="copy-tip">点击复制</text>
	    </view>
	
	    <button class="close-btn" @click="closePopup">关闭</button>
	  </view>
	</uni-popup>
		
	</view>
</template>


<script>
	import {
		listCmsCode
	} from '@/api/cms/cms';
	export default {
		data() {
			return {
				keyword: "",
				isSearchFocus: false, // 搜索框聚焦状态
				// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
				dataList: [],
				shareData: {
				  title: "示例分享",
				  shareUrl: "https://example.com/share/123",
				  shareCode: "SHARE2025"
				}
			};
		},
		methods: {
			// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
			queryList(pageNo, pageSize) {
				// 此处请求仅为演示，请替换为自己项目中的请求
				//            this.$request.queryList({ pageNo,pageSize }).then(res => {
				// // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
				//            	this.$refs.paging.complete(res.data.list);
				//            }).catch(res => {
				//            	// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
				//            	// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				//            	// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				//            	this.$refs.paging.complete(false);
				//            })

				listCmsCode({
					"pageNum": pageNo,
					pageSize,
					"title": this.keyword
				}).then(res => {
					console.log(res)
					// res.rows = [].concat(...Array(100).fill(res.rows))
					this.$refs.paging.complete(res.rows);
				}).catch(res => {
					// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
					// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			},
			itemClick(item, index) {
				console.log(item)
				// this.$tab.navigateTo('/pages/articleDetail/articleDetail?article=' + encodeURIComponent(JSON.stringify(item)))
				// this.showPopup = true
				this.shareData = {...item}
				this.$refs.popup.open()
			},
			// toExcel(){
			// 	// this.$tab.navigateTo('https://www.baidu.com')
			// 	uni.openUrl({
			// 		url:'https://www.baidu.com'
			// 	})
			// },
			closePopup(){
				this.$refs.popup.close()
			},
			copyText(text) {
			  uni.setClipboardData({
			    data: text,
			    success: () => {
			      uni.showToast({
			        title: '复制成功',
			        icon: 'none'
			      });
			    }
			  });
			},
			handleSearch() {
				console.log("search....")
				this.$refs.paging.reload()
			},
			clearSearch() {
				console.log("clear....")
				// this.keyword = ""
				this.$set(this, 'keyword', '')
				this.$refs.paging.reload()
				// this.$forceUpdate()

			}
		},
	};
</script>


<style lang="scss" scoped>
	/* 搜索栏区域 */
	.search-wrapper {
		padding: 20rpx 30rpx;
		background: #fff;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
		margin-bottom: 20rpx;
	}

	.search-container {
		height: 80rpx;
		background: #f5f5f5;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		padding: 0 28rpx;
		transition: all 0.3s;

		&.search-focus {
			background: #fff;
			box-shadow: 0 4rpx 16rpx rgba(32, 128, 240, 0.15);
		}
	}

	.search-input {
		flex: 1;
		height: 100%;
		font-size: 28rpx;
		color: #333;
		padding: 0 16rpx;
	}

	.clear-btn {
		padding: 8rpx;
		border-radius: 50%;
		transition: all 0.2s;

		&:active {
			background: rgba(0, 0, 0, 0.05);
			transform: scale(0.9);
		}
	}

	/* 列表项样式 */
	.list-item {
		display: flex;
		align-items: center;
		padding: 32rpx;
		margin: 0 24rpx 24rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
		transition: all 0.3s;

		&:active {
			transform: scale(0.98);
			opacity: 0.9;
		}
	}

	.image-wrapper {
		width: 160rpx;
		height: 160rpx;
		border-radius: 12rpx;
		overflow: hidden;
		background: linear-gradient(135deg, #f5f5f5, #eee);

		.item-image {
			width: 100%;
			height: 100%;
		}
	}

	.content-wrapper {
		flex: 1;
		margin-left: 24rpx;
		padding-right: 40rpx;
	}

	.title-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.item-title {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
		line-height: 1.4;
		@include text-ellipsis(1);
	}

	.item-time {
		font-size: 24rpx;
		color: #999;
		flex-shrink: 0;
	}

	.item-brief {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		@include text-ellipsis(2);
	}

	.arrow-icon {
		position: absolute;
		right: 24rpx;
		opacity: 0.6;
	}

	/* 动画效果 */
	@keyframes item-enter {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.list-item {
		animation: item-enter 0.4s ease-out;
	}
	
	
	
	
	//弹窗
	.popup-content {
	  padding: 30rpx;
	  background: #fff;
	  border-radius: 16rpx;
	  width: 600rpx;
	}
	.title {
	  font-size: 36rpx;
	  font-weight: bold;
	  margin-bottom: 30rpx;
	  text-align: center;
	}
	.item {
	  padding: 20rpx 0;
	  border-bottom: 1rpx solid #eee;
	  display: flex;
	  align-items: center;
	}
	.label {
	  font-weight: bold;
	  margin-right: 10rpx;
	  width: 150rpx;
	}
	.copyable {
	  color: #007AFF;
	  flex: 1;
	}
	.copy-tip {
	  font-size: 24rpx;
	  color: #999;
	  margin-left: 20rpx;
	}
	.close-btn {
	  margin-top: 40rpx;
	  background: #007AFF;
	  color: white;
	}
</style>